﻿@page "/GridToolbar"
@inject WeatherForecastService ForecastService

<div class="demo-description mw-1100">
    <h2>Data Grid - Toolbar</h2>
    <p>Follow the steps below to add a toolbar to a Data Grid component:</p>
    <ol>
        <li>Add <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.HeaderTemplate" target="_blank" rel="nofollow">HeaderTemplate</a> to the Data Grid’s markup.</li>
        <li>Add buttons (<a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem" target="_blank" rel="nofollow">DxToolbarItem</a> objects) to the <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar" target="_blank" rel="nofollow">Toolbar</a> component in this template. Each button can display an icon, text, or both.</li>
    </ol>
    <p>For more information on the Toolbar’s features, refer to the <a class="helplink" href="https://demos.devexpress.com/blazor/Toolbar#Overview" target="_blank" rel="nofollow">Toolbar's online demos</a> and <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar" target="_blank" rel="nofollow">documentation</a>.</p>
</div>

<DxDataGrid @ref="grid"
            Data="@Data"
            ShowFilterRow="@ShowFilterRow"
            @bind-SingleSelectedDataRow="@SelectedRow"
            RowInsertingAsync="@OnRowInserting"
            RowUpdatingAsync="@OnRowUpdating"
            InitNewRow="@OnInitNewRow"
            CssClass="mw-1100">
    <HeaderTemplate>
        <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
            <DxToolbarItem Text="New" BeginGroup="true" Click="@OnAddNewClick" IconCssClass="grid-toolbar-new" />
            <DxToolbarItem Text="Edit" Click="@OnEditClick" IconCssClass="grid-toolbar-edit" Enabled="@Enabled" />
            <DxToolbarItem Text="Delete" Click="@OnDeleteClick" IconCssClass="grid-toolbar-delete" Enabled="@Enabled" />
            <DxToolbarItem Text="Show Filter Row" BeginGroup="true" GroupName="FilterRow" Click="@OnShowFilterRow" IconCssClass="grid-toolbar-filter-row" />
            <DxToolbarItem Text="Examples" NavigateUrl="https://supportcenter.devexpress.com/ticket/list/?preset=824230fc-7d61-47a7-a3f9-ea0eed42df56" BeginGroup="true"
                           Alignment="ToolbarItemAlignment.Right" IconCssClass="grid-toolbar-document" target="_blank" />
        </DxToolbar>
    </HeaderTemplate>
    <Columns>
        <DxDataGridColumn Field="@nameof(Order.Product)" Width="30%" />
        <DxDataGridDateEditColumn Field="@nameof(Order.OrderDate)" DisplayFormat="D" EditorFormat="D" Width="27%" />
        <DxDataGridSpinEditColumn Field="@nameof(Order.UnitPrice)" Width="13%" />
        <DxDataGridSpinEditColumn Field="@nameof(Order.UnitsInOrder)" Width="16%" />
        <DxDataGridComboBoxColumn Field="@nameof(Order.OrderStatus)" Data="@DataStatus" Width="14%" />
    </Columns>
</DxDataGrid>

@code {
    IEnumerable<Order> Data;
    IEnumerable<OrderStatus?> DataStatus;
    Order SelectedRow;
    DxDataGrid<Order> grid;
    bool Enabled = true;
    bool ShowFilterRow = false;
    OrderRepository repository = new OrderRepository();

    protected override async Task OnInitializedAsync() {
        Data = await repository.GetData();
        DataStatus = new List<OrderStatus?> { OrderStatus.Processing, OrderStatus.InTransit, OrderStatus.Delivered };
        SetSelection();
    }
    async Task OnAddNewClick() {
        await grid.StartRowEdit(null);
        if(!Enabled)
            ChangeToolbarEnabled(true);
    }
    async Task OnEditClick() {
        await grid.StartRowEdit(SelectedRow);
    }
    async Task OnDeleteClick() {
        repository.Remove(SelectedRow);
        await grid.Refresh();
        if(Data.Count() == 0)
            ChangeToolbarEnabled(false);
        else
            SetSelection();
    }
    async Task OnRowInserting(IDictionary<string, object> newValue) {
        repository.Add(newValue);
        await Task.CompletedTask;
    }
    async Task OnRowUpdating(Order dataItem, IDictionary<string, object> newValue) {
        repository.Update(dataItem, newValue);
        await Task.CompletedTask;
    }
    Task OnInitNewRow(Dictionary<string, object> values) {
        values.Add("OrderDate", DateTime.Now);
        return Task.CompletedTask;
    }
    void SetSelection() {
        SelectedRow = Data.First();
    }
    void ChangeToolbarEnabled(bool enabled) {
        Enabled = enabled;
        StateHasChanged();
    }
    void OnShowFilterRow(ToolbarItemClickEventArgs e) {
        ShowFilterRow = !ShowFilterRow;
    }
}

<CodeSnippet_Grid_Toolbar></CodeSnippet_Grid_Toolbar>
